<template>
  <view class="content">
    <uni-icons
      class="back"
      @click="toIndex"
      type="left"
      size="30"
      color="#FFFFFF"></uni-icons>
    <view class="top">
      <uni-icons
        type="checkbox-filled"
        color="white"
        style="vertical-align: -10%; margin-right: 20rpx"
        size="30"></uni-icons
      ><text>兑换成功</text>
    </view>
    <view class="center">
      <view class="one">
        <text class="txt">消耗{{ $tokenName }}</text>
        <text class="txt">{{ consumeNum }}{{ $tokenName }}</text>
      </view>
      <view class="one">
        <text class="txt">兑换流水号</text>
        <text class="txt">{{ serialNum }}</text>
      </view>
      <view class="one">
        <text class="txt">特别说明</text>
        <text class="txt">当前权益不支持退换</text>
      </view>
    </view>
    <view class="bottom">
      <view
        class="left"
        @click.stop="toIndex"
        >暂不使用</view
      >
      <view
        class="right"
        @click.stop="toTokenPages"
        >去使用</view
      >
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        serialNum: '',
        consumeNum: ''
      }
    },
    onLoad(options) {
      console.log(options)
      this.consumeNum = options.consumeNum
      this.serialNum = options.serialNum
    },
    methods: {
      toTokenPages() {
        uni.redirectTo({
          url:
            '/pages/tokenPages/tokenPages?' +
            'memberId=' +
            this.$store.getters.userInfo.id +
            '&type=notUse'
        })
      },
      toIndex() {
        uni.switchTab({
          url:
            '/pages/index/index?' +
            'memberId=' +
            this.$store.getters.userInfo.id
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .content {
    background-color: #f6f6f6;
    height: 100vh;
    .back {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 9;
    }
    .top {
      width: 750rpx;
      height: 312rpx;
      background-color: #0e195b;
      font-size: 40rpx;
      text-align: center;
      margin: 0 auto;
      color: #ffffff;
      padding-top: 80rpx;
      vertical-align: middle;
      line-height: 100rpx;
    }
    .center {
      background-color: #fff;
      width: 710rpx;
      height: 240rpx;
      margin: 0 20rpx;
      background: #ffffff;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      padding: 20rpx;
      padding-top: 40rpx;
      .one {
        display: flex;
        justify-content: space-between;
        .txt {
          font-size: 28rpx;
          font-weight: 500;
          color: #666666;
          line-height: 33rpx;
          margin-bottom: 20rpx;
        }
      }
    }
    .bottom {
      width: 100%;
      background-color: #fff;
      position: fixed;
      bottom: 0;
      display: flex;
      justify-content: space-evenly;
      padding: 20rpx 0;
      .left {
        width: 344rpx;
        height: 76rpx;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        opacity: 1;
        border: 2rpx solid #999999;
        text-align: center;
        line-height: 76rpx;
        color: #999999;
        font-size: 40rpx;
      }
      .right {
        width: 344rpx;
        height: 76rpx;
        background: linear-gradient(90deg, #05d4fd 0%, #2976ff 100%);
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        opacity: 1;
        text-align: center;
        line-height: 76rpx;
        color: #fff;
        font-size: 40rpx;
      }
    }
  }
</style>
